<template>
  <div>
    <el-container>

      <el-header class="headerSon">
        <div class="title">
          教学管理系统： {{ user.teacher.toString() === '1' ? teac : stu }}
        </div>
        <!--个人中心下拉框-->
        <el-dropdown class="userInfo" @command="commandHandler">
          <span class="el-dropdown-link">
            <font class="fontSize">{{ user.name }}</font><i><img :src="img"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="userinfo">个人信息</el-dropdown-item>
            <el-dropdown-item command="seeting">设置</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            <!--            <el-dropdown-item disabled>双皮奶</el-dropdown-item>-->
            <!--            <el-dropdown-item divided>蚵仔煎</el-dropdown-item>-->
          </el-dropdown-menu>
        </el-dropdown>

      </el-header>
      <el-container>
        <el-aside width="200px">
          <!--菜单点击事件-->
          <!--<el-menu @select="menClick">-->
          <!--开启路由模式之后就不用写传统的点击事件来跳转界面-->
          <el-menu router unique-opened>
            <!--遍历路由 routes 中的整个数组所有路由，item 是遍历的每一个路由对象，index是下标-->
            <!--!item.hidden 不 循环显示 /login 页面-->
            <!--item.student 只循环显示-->
            <!--v-if="user.teacher.toString() === '1'?!item.hidden:item.exhibition"-->
            <el-submenu
                v-for="(item,index) in routes"
                v-if="user.teacher.toString() === '1'?!item.Login:item.student"
                :index="index + ''"
                :key="index">
              <!--菜单导航-->
              <template slot="title">
                <i :class="item.icon" :style="color"></i>
                <span>{{ item.name }}</span>
              </template>
              <!--子菜单-->
              <!--循环子菜单中的页面对象，children是父菜单中的一个数组 :index="children.path" :页面跳转的路由-->
              <el-menu-item v-for="(children,childrenIndex) in item.children" :index="children.path"
                            :key="childrenIndex">
                {{ children.name }}
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <!--不是首页的时候在显示面包屑效果-->
          <el-breadcrumb separator-class="el-icon-arrow-right" v-if="this.$router.currentRoute.path!='/home'">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <!--当前路由名字-->
            <el-breadcrumb-item>{{ this.$router.currentRoute.name }}</el-breadcrumb-item>
          </el-breadcrumb>
          <!--是首页在显示这个div的内容-->
          <div class="homeWeCome" v-if="this.$router.currentRoute.path=='/home'">
            请开始你的表演
          </div>
          <router-view class="homeRouterView"/>
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>


<script>
export default {
  name: "Home",
  // 传统的点击事件跳转界面，如果有很多菜单需要跳转，就会写很多重复代码
  // methods:{
  //     menClick(index){
  //         this.$router.push(index);
  //     }
  // }
  data() {
    return {
      // 获取当前登录用户信息，在manin.js登录验证存进的session，接口获取的是一个json格式字符串，转换为js对象
      user: JSON.parse(window.sessionStorage.getItem('user')),
      // 用户头像图片
      img: window.sessionStorage.getItem('img'),
      // 菜单导航图标颜色
      color: 'color: blue;margin-right: 5px',
      teac: '教师端',
      stu: '学生端',
    }
  },
  computed: {
    routes() {
      // 从index.js取
      return this.$router.options.routes;
      //从 Vuex 中获取菜单数据
      // return this.$store.state.routes;
    }
  },
  methods: {
    commandHandler(command) {
      if (command === 'logout') {
        this.$confirm('此操作将退出登陆, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 注销处理
          this.postRequest('/logout')
          // 清除 session 缓存
          window.sessionStorage.removeItem("tokenStr")
          window.sessionStorage.removeItem("user")
          window.sessionStorage.removeItem("img")
          // 跳转到登录页
          this.$router.replace('/');
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });

      } else if (command === 'userinfo') {
        let userInfo = this.getRequest('/admin/info')
        alert(userInfo)

      } else {

      }
    }
  }
}
</script>

<style>
.headerSon {
  background: blueviolet;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  box-sizing: border-box;
}

.headerSon .title {
  font-size: 30px;
  font-family: 华文楷体;
  color: white;
}


.headerSon .userInfo {
  cursor: pointer;
}

.el-dropdown-link img {
  color: blueviolet;
  width: 35px;
  height: 35px;
  border-radius: 24px;
  margin-left: 10px;
}

.fontSize {
  font-size: 20px;
  font-family: 华文楷体;
  color: white;
}

.homeWeCome{
  /*!*居中*!*/
  /*text-align: center;*/
  /*字体大小*/
  font-size: 30px;
  /*字体*/
  font-family: 华文楷体;
  /*颜色*/
  color: blueviolet;
  /*靠左*/
  padding-left: 50px;
}

.homeRouterView{
  margin-top: 10px;
}

</style>
